import ReactDOM from 'react-dom'
import { useState, useRef, useEffect } from 'react'

const App = () => {
  const [count, setCount] = useState(100)
  const [theme, setTheme] = useState('pink')
  const onClick = () => {
    console.log('获取到文本框的值', inputRef.current!.value)
  }
  const inputRef = useRef<HTMLInputElement>(null)

  // 验证useRef创建的对象在组件更新期间保持引用不变
  useEffect(() => {
    console.log('effrct run')
  }, [inputRef])

  // 这里的提示就是因为User是useEffect的依赖项，所以每次数据更新都会导致
  // 下面的这个监听函数更新，提示可以使用useMemo来优化代码
  const user = { age: 18 }
  // 每次组件内的数据更新，不管是哪一个数据，只要更新，整个组件它都会重新渲染 
  // 而每次组件重新渲染，都会重新生成一次User对象，所以这个监听函数每次都会被触发
  useEffect(() => {
    console.log('effrct run222')
  }, [user])

  return (
    <div style={{ backgroundColor: theme, padding: 10 }}>
      <button onClick={() => setTheme(theme === 'pink' ? 'white' : 'pink')}>
        切换主题
      </button>
      <h1>计数器：{count}</h1>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <hr />
      <div>
        <input type='text' ref={inputRef} />
        <button onClick={onClick}>获取文本框的值</button>
      </div>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))
